<template>
    <div class="app-container calendar-list-container"> 
        <!-- 搜索框，对工段信息进行搜索 -->
      <div class="filter-container">
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.orderType"
                style="width: 150px;margin-right:15px;margin-top:7px"
                class="filter-item"
                placeholder="请输入工单单别"
        ></el-input>
        <!-- style="width: 150px;margin-right:15px;margin-top:7px" -->
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.workOrderNo"
                style="margin-right: 15px;margin-top:7px"
                :style="{ width: inputWid(listQuery.workOrderNo) }"
                class="filter-item"
                placeholder="请输入工单单号"
        ></el-input>
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.orderPlanNo"
                style="margin-right: 15px;margin-top:7px"
                :style="{ width: inputWid(listQuery.orderPlanNo) }"
                class="filter-item"
                placeholder="请输入计划批号"
        ></el-input>
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.clientNumber"
                style="margin-right: 15px;margin-top:7px"
                :style="{ width: inputWid(listQuery.clientNumber) }"
                class="filter-item"
                placeholder="请输入客户品号"
        ></el-input>
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.technologyNo"
                style="margin-right: 15px;margin-top:7px"
                :style="{ width: inputWid(listQuery.technologyNo) }"
                class="filter-item"
                placeholder="请输入产品编号"
        ></el-input>
        <el-date-picker
            v-model="dateOptions"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            align="right"
            style="margin-right:15px;margin-top:7px">
        </el-date-picker>
        <el-button class="filter-item" style="margin-top:7px" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
      </div>

    <!-- 表单 -->
    <el-table :data="tablelList" 
    v-loading="listLoading" 
    element-loading-text="拼命加载中" 
    stripe border fit 
    highlight-current-row 
    style="width: 100%"
    :height="height">
        <el-table-column label="序号" type="index" align="center"/>
        <el-table-column label="打印时间" prop="createTime" align="center"/>
        <el-table-column label="工单单别" prop="orderType" align="center"/>
        <el-table-column label="工单单号" prop="workOrderNo" align="center"/>
        <el-table-column label="计划批号" prop="orderPlanNo" align="center"/>
        <el-table-column label="客户品号" prop="clientNumber" align="center"/>
        <el-table-column label="产品编号" prop="technologyNo" align="center"/>
        <el-table-column label="工单条码" prop="proOrderNo" align="center"/>
    </el-table>

       <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40,100,300,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    </div>
</template>

<script>
import { findZplPrinterInfo } from '../../api/orderAndMachine'
export default {
    name: 'printFlowCardRecords',
    data() {
        return {
            listQuery: {                                //搜索的内容表单
                page: 1,
                limit: 20
            },
            total: 0,    //总的信息条数
            tablelList: [],                               //table表单的信息           
            listLoading: false,                          //table加载的动画控制条件
            userInfo: this.$store.state.user.userInfo,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            dateOptions: [],
            height: 650
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
        async handleFilter() {
            this.listLoading = true
            let query = Object.assign({},this.listQuery)
            if(!query.orderType) delete query.orderType
            if(!query.workOrderNo) delete query.workOrderNo
            if(!query.orderPlanNo) delete query.orderPlanNo
            if(!query.clientNumber) delete query.clientNumber
            if(!query.technologyNo) delete query.technologyNo
            if(this.dateOptions.length){
                query.beginTime = this.dateOptions[0]
                query.finishTime = this.dateOptions[1]
            }
            const data = await findZplPrinterInfo(query)
            if(data.code == '2') return this.$message.error(data.msg)
            this.tablelList = data.data.list
            this.total = data.data.count
            this.listLoading = false
            if(!this.tablelList.length){
              this.height = ''
              return
            }
            if(this.tablelList.length<15){this.height = ''} else {this.height = 650}
        },
        getData() {
            this.listQuery.page = 1
            this.listQuery.limit = 20
            this.handleFilter()
        }, 
        handleSizeChange(val) {
            this.listQuery.limit = val
            this.handleFilter()
        },
        handleCurrentChange(val) {
            this.listQuery.page = val
            this.handleFilter()
        }
    },
      // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
    mounted() {
        this.handleFilter()
  },
}
</script>

<style>

</style>